<template>
	<view>
		<view style="width: 100%;height: 100vh;position: absolute;left: 0;tab-size: 0;" id="areaindo">
		</view>
		<view class="fixed-top mt-3  px-5">
			<view class="shadow bg-white">
				<view class="border-bottom flex p-2 align-center" :class="cur==index?'active':''"
					v-for="(item, index) in dataList" :key="index" @click="showPoint(index)">{{ item.fenceName }}</view>
			</view>
		</view>
		<view class="fixed-bottom mb-3 px-5">
			<view class="flex justify-between">
				<view class="flex rounded-circle bg-dark colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 200rpx;" @click="clearPoints">
					删除
				</view>
				<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 200rpx;" @click="save">新增绘制</view>
			</view>
		</view>
	</view>
</template>

<script>
	import maps from "../../../static/maps.js"
	export default {
		data() {
			return {
				map: null,
				latitude: '',
				longitude: '',
				markers: [],
				array: [],
				polygon: [],
				value: '',
				dataList: [],
				deleteId: '',
				mappolygon: null,
				cur: 0
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('areaindo', {
					zoom: 16, //缩放级别
					resizeEnable: true, //自动定位
				});
				_this.fordata();
			})
		},
		methods: {
			fordata() {
				let this_ = this;
				let opts = {
					url: 'Geo/Info.shtml'
				};

				let param = {
					serialNo: uni.getStorageSync('imei')
				};
				this_.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						this_.dataList = res.data.ReturnData.data;
						if (this_.dataList != '') {
							this_.cur = 0;
							this_.showPoint(0)
						} else {
							uni.getLocation({
								type: 'wgs84',
								success: function(lb) {
									uni.hideLoading()
									console.log('当前位置的经度：' + lb.longitude);
									console.log('当前位置的纬度：' + lb.latitude);
									this_.latitude = lb.latitude;
									this_.longitude = lb.longitude;
									console.log(lb.longitude, lb.latitude);
									var result = gcoord.transform(
										[lb.longitude, lb.latitude], // 经纬度坐标
										gcoord.WGS84, // 当前坐标系
										gcoord.GCJ02 // 目标坐标系
									);
									this_.map.setCenter(result);
									console.log(result); // [116.41661560068297, 39.92196580126834]
								},
							})
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			showPoint(data) {
				let this_ = this;
				this_.cur = data;
				this_.polygon = [];
				this_.array = [];
				let points = this_.dataList[data].fencenPoints;
				this_.deleteId = this_.dataList[data].fenceId;
				this_.latitude = points[0].lat;
				this_.longitude = points[0].lng;
				this_.map.setCenter([this_.longitude, this_.latitude]);
				for (let i = 0; i < points.length; i++) {
					let jwd = {
						latitude: points[i].lat,
						longitude: points[i].lng,
						index: points[i].index
					};
					this_.array.push(jwd);
				}
				this_.array.forEach((item) => {
					this_.polygon.push([item.longitude, item.latitude]);
				});
				this_.mappolygon = new AMap.Polygon({
					path: this_.polygon, //设置多边形边界路径
					strokeColor: "#FF33FF", //线颜色
					strokeOpacity: 0.2, //线透明度
					strokeWeight: 1, //线宽
					fillColor: "#1791fc", //填充色
					fillOpacity: 0.35 //填充透明度
				});
				this_.mappolygon.setMap(this_.map);
			},

			clearPoints() {
				let this_ = this;
				if (this_.deleteId != '') {
					let content="是否删除名称："+this_.dataList[this_.cur].fenceName+'的围栏！'
					uni.showModal({
						title: '提示',
						content: content,
						success: function(res) {
							if (res.confirm) {
								let opts = {
									url: 'Geo/Delete.shtml'
								};
								let param = {
									geofenceId: this_.deleteId
								};
								this_.$http.httpRequest(opts, param).then(
									res => {
										this_.map.remove(this_.mappolygon);
										this_.markers = [];
										this_.array = [];
										this_.polygon = [];
										this_.fordata();
									},
									error => {
										console.log(error);
									}
								);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});

				}
			},
			save() {
				uni.navigateTo({
					url: '../area/area'
				});
			}
		}
	};
</script>

<style>
	.active {
		background-color: #FFA800;
		color: #FFFFFF;
	}
</style>
